/*
 * @Author: your name
 * @Date: 2020-07-29 22:29:13
 * @LastEditTime: 2020-07-29 22:45:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \react-hooks-app\src\hooks\useWinSize.js
 */

  import { useState,useCallback,useEffect } from 'react';


  function useWinSize(){

    const [size,setSize] = useState({
      width:document.documentElement.clientWidth,
      height:document.documentElement.clientHeight
    })

    const onResize = useCallback(()=>{
      setSize({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
      })
    },[])

    useEffect(() => {
      console.log('usehooks-useEffect')
      window.addEventListener('resize',onResize)
      return () => {
        console.log('-----usehook-useEffect')
        window.removeEventListener('resize',onResize)
      }
    })

    return size

  }

  export default useWinSize
